<template>
  <header class="header-bar">
    <!-- 左侧 Logo 区 -->
    <div class="logo" @click="goHome">
      <img class="logo-img" src="@/assets/img/favicon.ico" alt="logo" />
      <span class="title">Mole</span>
    </div>

    <div class="avatar-box">
      <div class="avatar-wrapper">
        <img class="avatar" src="@/assets/img/avatar/avatar_rosie1.png" alt="avatar" />
      </div>
      <span class="status-dot" :class="statusClass"></span>
    </div>

    <!-- 中间导航菜单 -->
    <div class="nav-container">
      <nav class="nav">
        <div
          v-for="item in navList"
          :key="item.path"
          class="nav-item-wrapper"
          @mouseenter="onMouseEnter(item)"
          @mouseleave="onMouseLeave(item)"
        >
          <div
            :class="[
              'nav-item',
              {
                active: isActive(item.path),
                hovered: isHovered(item.path)
              }
            ]"
            @click="navigateTo(item)"
          >
            <span class="nav-text">{{ t(item.label) }}</span>
          </div>

          <!-- 二级菜单 -->
          <div
            v-if="item.children && item.children.length"
            class="sub-nav"
            :class="{ show: showSubNav === item.path }"
          >
            <div
              v-for="subItem in item.children"
              :key="subItem.path"
              class="sub-nav-item"
              :class="{ active: isActive(subItem.path) }"
              @click="navigateTo(subItem)"
            >
              {{ t(subItem.label) }}
            </div>
          </div>
        </div>
      </nav>
    </div>

    <!-- 右侧用户操作区 -->
    <div class="user"> </div>
  </header>
</template>

<script setup lang="ts">
  import { useRoute, useRouter } from 'vue-router'
  import { useI18n } from 'vue-i18n'
  import { navService } from '@/types/config/nav-config/nav-service'
  import type { NavMenuItem } from '@/types/config/'

  defineOptions({ name: 'MoleArtHeaderBar' })

  const router = useRouter()
  const route = useRoute()
  const { t } = useI18n()

  const hoveredItem = ref<string | null>(null)
  const showSubNav = ref<string | null>(null)

  const status = ref<'online' | 'offline' | 'error'>('online')

  // 从服务中获取导航配置
  const navList = computed(() => navService.getNavConfig())

  const statusClass = computed(() => {
    return {
      'is-online': status.value === 'online',
      'is-offline': status.value === 'offline',
      'is-error': status.value === 'error'
    }
  })

  /** 跳转首页 */
  const goHome = () => router.push('/')

  /** 当前路由高亮判断 */
  const isActive = (path: string) => navService.isActive(route.path, path)

  /** 鼠标进入事件 */
  const onMouseEnter = (item: NavMenuItem) => {
    hoveredItem.value = item.path
    if (item.children && item.children.length) {
      showSubNav.value = item.path
    }
  }

  /** 鼠标离开事件 */
  const onMouseLeave = (item: NavMenuItem) => {
    setTimeout(() => {
      if (hoveredItem.value === item.path) {
        hoveredItem.value = null
      }
      if (showSubNav.value === item.path) {
        showSubNav.value = null
      }
    }, 150)
  }

  /** 判断是否悬停 */
  const isHovered = (path: string) => hoveredItem.value === path

  /** 导航到指定路径 */
  const navigateTo = (item: NavMenuItem) => {
    if (item.path) {
      router.push(item.path)
    }
  }
</script>

<style lang="scss" scoped>
  @use './style';
</style>
